<template>
	<view class="mainCss">
		<view class="titleBox">
			<view class="titleLeft">
				<img src="../../static/title/back.png" class="titleBack" @click="goBack">
			</view>
			<view class="titleText">
				<text>管家</text>
			</view>
			<view class="titleRight">

			</view>
		</view>
		<view class="selectBox">
			<view class="selectBox1">
				<view class="selectIconBox">
					<img src="../../static/home/select.png" class="selectIcon">
				</view>
				<input type="text" class="selectInput" v-model="selectInfo" placeholder="请输入搜索内容"
					placeholder-style="color: #DFDFDF;">
			</view>
			<view class="">
				<button class="selectButton">搜索</button>
			</view>
		</view>
		<view class="bgBox">
			<view class="overBox">
				<view class="overflowBox">
					<view class="changeBox" :style="{width: typeList.length * 150 + 'rpx'}">
						<view class="type" :class="[type == index?'type1':'type']" v-for="(item, index) in typeList"
							:key="index" @click="tapInfo(index)">
							<text>{{item.typeName}}</text>
							<span class="border_bom" v-show="type == index"></span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bodyBox">
			<view class="keeperBox" v-for="(item, index) in 5" :key="index">
				<view class="imgBox">
					<img src="../../static/home/info.jpg" class="img">
				</view>
				<view class="infoBox">
					<text>苏州率秋企业服务有限公司</text>
					<view style="display: flex; width: 100%;">
						<img src="../../static/housekeeper/xingxing.png" class="xingxing">
						<text class="pingfen">4.7分</text><text class="pingjia">服务好、价格满意</text>
					</view>
					<view style="display: flex; align-items: center;">
						<text class="biaoqian">办公用品</text>
						<text class="biaoqian">桌椅凳子</text>
					</view>
				</view>
				<view class="address">
					<text>1.1km</text>
				</view>
			</view>
		</view>
		<view class="fiexdBox">
			<img src="../../static/housekeeper/kefu.png" class="fiexdIcon">
			<img src="../../static/housekeeper/ruzhu.png" class="fiexdIcon">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				selectInfo: '',
				typeList: [{
					typeName: '采购'
				}, {
					typeName: '装修'
				}, {
					typeName: '维修'
				}, {
					typeName: '送货'
				}, {
					typeName: '推广'
				}, {
					typeName: '工商注册'
				}, {
					typeName: '广告招聘'
				}, {
					typeName: '网络布线'
				}, {
					typeName: '网站建设'
				}, {
					typeName: '岗职培训'
				}, {
					typeName: '法律咨询'
				}],
			}
		},
		onLoad(src) {
			this.type = src.type
		},
		methods: {
			// 返回
			goBack() {
				uni.navigateBack(0)
			},
			// 获取当前的下标
			tapInfo(index) {
				this.type = index
			},
		}
	}
</script>

<style>
	@import '../../css/allType.css';
	@import '../../css/housekeeper.css';
</style>